<template>
  <div class="creator-list-wrapper" :class="{hiddenList: !ifShowList}">
    <div class="title" @click="ifShowList = !ifShowList" :class="{colorBlue: selectIdx !== -1}">
      <div class="content"><slot></slot></div>
      <div class="arrow-wrapper">
        <i class="iconfont icon-arrow-down" :class="{rotateX180: ifShowList}"></i>
      </div>
      <div class="hover" :class="{ifSelect: selectIdx !== -1}"></div>
    </div>
    <ul class="list" ref="list">
      <li v-for="(item, idx) in items" :key="idx" @click="select(idx)">
        <creator-list-item 
        class="creator-list-item"
        :placeholder="item"
        :ifSelect="idx===selectIdx"></creator-list-item>
      </li>
    </ul>
  </div>
</template>

<script>
import CreatorListItem from './CreatorListItem.vue';

  export default {
    components: {
      CreatorListItem,
    },
    props: {
      items: {
        type: Array,
        default: () => []
      },
      selectIdx: {
        type: Number,
        default: () => -1
      }
    },
    data() {
      return {
        ifShowList: false
      }
    },
    methods: {
      select(idx) {
        this.$emit('changeSelectIdx', idx);
      }
    },
    mounted () {
      // let list = this.$refs.list;
      // list.style.height = list.children.length * ;
    },
  }
</script>

<style lang="less" scoped>
@w: var(--creatorListWidth);
@h: var(--creatorListHeight);

.creator-list-wrapper {
  box-sizing: border-box;
  width: @w;
  max-height: 200px;

  overflow: hidden;
  transition: .3s;

  &.hiddenList {
    max-height: @h;
  }

  .title {
    width: @w;
    height: @h;

    .content {
      float: left;

      display: flex;
      justify-content: left;
      align-items: center;

      width: 70%;
      height: 100%;
    }

    .arrow-wrapper {
      float: right;
      display: flex;
      align-items: center;

      width: 15%;
      height: 100%;
      
      .iconfont {
        font-size: calc(@h * 0.4);

        transition: .3s;
      }
    }

    .hover {
      position: absolute;
      top: 50%;
      left: 0;
      transform: translateY(-50%);

      width: 0;
      height: calc(@h * 0.6);

      border-radius: calc(@h * 0.05);
      background-color: var(--darkBlue);

      transition: .1s;

      &.ifSelect {
        width: calc(@w * 0.01);
      }
    }

    &:hover {
      cursor: pointer;
      .hover {
        width: calc(@w * 0.01);
      }
    }
  }

  .list {
    width: @w;

    transition: .3s;

    li > .creator-list-item{
      margin-top: calc(@h * 0.1);
      --creatorListItemWidth: @w;
      --creatorListItemHeight: calc(@h * 0.7);
      --creatorListItemFontsize: calc(@h * 0.28);
    }
  }
}
</style>